import React, { useMemo } from 'react';
import { useModel } from 'umi';
import { Col } from 'antd';
import { ProFormText } from '@ant-design/pro-form';

export type ProFormMutiLangTextProps = {
  productId?: number;
  productIds?: number[];
  colSpan?: number | undefined;
};

const ProFormMutiLangText: React.FC<ProFormMutiLangTextProps> = (props) => {
  let listProductIds = props.productIds ?? [];

  if (props.productId) {
    listProductIds.push(props.productId);
  }

  if (!listProductIds || listProductIds.length < 1) {
    return null;
  }

  console.log('xxxx, listProductIds: ', listProductIds);

  const { getProductsLangs } = useModel('useGlobalModel', (model) => ({
    getProductsLangs: model.getProductsLangs,
  }));

  const productLangs = getProductsLangs(listProductIds);

  console.log('xxxx, productLangs: ', productLangs);

  const renderDom = useMemo(() => {
    if (productLangs && productLangs.length > 0) {
      if (props.colSpan) {
        return productLangs.map((item) => (
          <Col span={props.colSpan}>
            <ProFormText
              key={item.value}
              name={['mutiLangs', item.value]}
              label={item.label}
              placeholder={`请输入${item.label}`}
            />
          </Col>
        ));
      } else {
        return productLangs.map((item) => (
          <ProFormText
            key={item.value}
            name={['mutiLangs', item.value]}
            label={item.label}
            placeholder={`请输入${item.label}`}
          />
        ));
      }
    }
    return null;
  }, [props]);

  return <>{renderDom}</>;
};

export default ProFormMutiLangText;
